<template>
	<view class="an-body">
		<view class="an-top-nav">
		  <view class="status_bar">
			  <!-- 这里是状态栏 -->
		  </view>
		  <view class="an-nav-bg"> 
			    <view class="nav-left">
				  <span class="iconfont icon-back" @tap='clickBtn()'></span>
			    </view>
				<view class="nav-right">
					<button type="primary" size="mini" class="an-btn" @tap='formSubmit'>提交</button>
				</view>
		  </view>
		</view>
		<view class="an-addarticle">
			<view>
				<form @submit="formSubmit">
					<view class="uni-form-item uni-column">
						<input v-model.trim="from.name" :disabled="'true'" class="uni-input" name="title" placeholder="用户名" maxlength=50 />
					</view>
					<view class="uni-form-item uni-column">
						<textarea v-model.trim="from.msg" 
							class="uni-input an-textarea" 
							name="content" 
							focus 
							auto-height 
							show-confirm-bar
							@confirm="formSubmit"
							maxlength=1000 
							placeholder="留言内容部分"/>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import {mapState} from 'vuex'
	export default {
		computed: {
		    ...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				from:{
					name:'',
					msg:'',
					type: 3,	// 1 PC用户   2手机登录用户  3手机匿名用户
				}
			}
		},
		onLoad(){
			this.anLoad()
		},
		methods: {
			anLoad(){
				if(this.hasLogin){
					this.from.name = this.userInfo.name
					this.from.type = 2
				}else{
					this.from.name = '匿名用户'
					this.from.type = 3
				}
			},
			formSubmit(){
				if(graceChecker.isEmpty(this.from.msg)){
					uni.showToast({ title: '内容不能为空！', icon: "none" });
				}else{
					this.$api.addMsg(this.from).then(res=>{
						this.formReset();
						uni.showToast({title:"保存成功！", icon:"success"});
					})
				}
			},
			formReset(){	//清空表单
				this.from.msg = ''
			},
			clickBtn(){
				if(graceChecker.isEmpty(this.from.msg)){
					this.callBlack() 
				}else{
					uni.showModal({
						content: "确定要退出编辑？",
						confirmText: "确定",
						cancelText: "取消",
						success: (res)=>{
							if (res.confirm) {	//用户点击确定
								this.callBlack() 
							} else if (res.cancel) {	//用户点击取消
								console.log('用户点击取消');
							}
						}
					})
				}
				
			},
			callBlack(){
				/* uni.navigateBack({
				    delta: 1
				}); */
				uni.redirectTo({	// 关闭当前页面，跳转到应用内的某个页面。
				    url: '../../main/main',
				});
			}
		}
	}
</script>

<style>

</style>
